import React, { ReactElement, useContext } from 'react';
import { Image, View, Text } from 'react-native';

import Button from '../../../../components/Button';
import { blackLeft, payError, paySuccess } from '../../../../constant/resource';
import navigator from '../../../../util/navigator';

import styles from './style';
import { Store } from '../../reducer';
import { OrderResultDesc, OrderResultStatus } from '../../constant';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { orderInfo } = state;
  const { status } = orderInfo;
  const statusDesc = OrderResultDesc[status] || '';

  let containerStyle = {};
  if (status === OrderResultStatus.PayFail) {
    containerStyle = styles.fail;
  }

  let backgroundImage = paySuccess;
  if (status === OrderResultStatus.PayFail) {
    backgroundImage = payError;
  }

  return (
    <View style={[styles.container, containerStyle]}>
      {status !== OrderResultStatus.PaySuccess && (
        <Button
          hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
          style={styles.back}
          onPress={(): void => {
            navigator.goBack();
          }}
        >
          <Image style={styles.backIcon} source={blackLeft} />
        </Button>
      )}
      <Image
        style={styles.background}
        source={backgroundImage}
        resizeMode="contain"
      />
      <Text style={styles.status}>{statusDesc}</Text>
    </View>
  );
};
